import schema2component from "@/utils/schema2component";

const schema = {
    type: 'page',
    title: 'Dialog',
    body: [
      {
        type: 'button-toolbar',
        className: 'm-b',
        buttons: [
          {
            type: 'button',
            label: '打开弹框',
            actionType: 'dialog',
            dialog: {
              title: '提示',
              closeOnEsc: true,
              body: '这是个简单的弹框'
            }
          },
  
          {
            type: 'button',
            label: '多级弹框',
            actionType: 'dialog',
            dialog: {
              title: '提示',
              closeOnEsc: true,
              body: '这是个简单的弹框',
              actions: [
                {
                  type: 'button',
                  actionType: 'confirm',
                  label: '确认',
                  primary: true
                },
  
                {
                  type: 'button',
                  actionType: 'dialog',
                  label: '再弹一个',
                  dialog: {
                    title: '弹框中的弹框',
                    closeOnEsc: true,
                    body: '如果你想，可以无限弹下去',
                    actions: [
                      {
                        type: 'button',
                        actionType: 'close',
                        label: '算了'
                      },
                      {
                        type: 'button',
                        actionType: 'dialog',
                        label: '来吧',
                        level: 'info',
                        dialog: {
                          title: '弹框中的弹框',
                          closeOnEsc: true,
                          body: [
                            {
                              type: 'tpl',
                              tpl: '如果你想，可以无限弹下去',
                              inline: false
                            },
                            {
                              type: 'button',
                              actionType: 'submit',
                              label: '算了，不弹了',
                              close: true
                            }
                          ],
                          actions: [
                            {
                              type: 'button',
                              actionType: 'confirm',
                              label: '不弹了',
                              primary: true
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          },
  
          {
            type: 'button',
            label: '弹个表单',
            actionType: 'dialog',
            dialog: {
              size: 'lg',
              title: '在弹框中的表单',
              closeOnEsc: true,
              actions: [
                {
                  label: '取消',
                  actionType: 'close',
                  type: 'button'
                },
  
                {
                  label: '确认',
                  actionType: 'confirm',
                  type: 'button',
                  level: 'primary'
                },
  
                {
                  label: '提交不关闭',
                  actionType: 'submit',
                  close: false,
                  type: 'button',
                  api: '/api/mock2/form/saveForm?waitSeconds=2',
                  level: 'primary'
                },
  
                {
                  label: '保存不关闭',
                  actionType: 'ajax',
                  type: 'button',
                  api: '/api/mock2/form/saveForm?waitSeconds=4',
                  level: 'info'
                },
  
                {
                  type: 'button',
                  label: 'Feedback',
                  close: true,
                  actionType: 'ajax',
                  api: '/api/mock2/form/initData?waitSeconds=2',
                  tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。',
                  feedback: {
                    title: '操作成功',
                    body: 'xxx 已操作成功'
                  }
                }
              ],
              body: {
                type: 'form',
                api: '/api/mock2/form/saveForm?waitSeconds=2',
                title: '常规模式',
                mode: 'normal',
                body: [
                  {
                    type: 'input-email',
                    name: 'email',
                    required: true,
                    placeholder: '请输入邮箱',
                    label: '邮箱'
                  },
                  {
                    type: 'input-password',
                    name: 'password',
                    label: '密码',
                    required: true,
                    placeholder: '请输入密码'
                  },
                  {
                    type: 'checkbox',
                    name: 'rememberMe',
                    label: '记住登录'
                  }
                ]
              }
            }
          },
  
          {
            type: 'button',
            label: '再弹个表单',
            actionType: 'dialog',
            dialog: {
              title: '在弹框中的表单',
              actions: [
                {
                  label: '取消',
                  actionType: 'close',
                  type: 'button'
                },
  
                {
                  label: '确认',
                  actionType: 'confirm',
                  type: 'button',
                  level: 'primary',
                  disabledOn: '!data.rememberMe'
                }
              ],
              body: {
                type: 'form',
                api: '/api/mock2/form/saveForm?waitSeconds=2',
                title: '常规模式',
                mode: 'normal',
                body: [
                  {
                    type: 'checkbox',
                    name: 'rememberMe',
                    label: '勾上我才可以确认'
                  }
                ]
              }
            }
          },
  
          {
            type: 'button',
            label: 'Feedback',
            actionType: 'ajax',
            api: '/api/mock2/form/initData?waitSeconds=2',
            tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。',
            feedback: {
              title: '操作成功',
              closeOnEsc: true,
              body: 'xxx 已操作成功'
            }
          },
  
          {
            type: 'button',
            label: 'Feedback2',
            actionType: 'ajax',
            api: '/api/mock2/form/initData?waitSeconds=2',
            tooltip: '可以根据条件弹出，比如这个例子，看当前时间戳是否可以整除3',
            feedback: {
              visibleOn: '!(this.date % 3)',
              title: '操作成功',
              body: '当前时间戳: <code>${date}</code>'
            }
          }
        ]
      },
  
      {
        type: 'button-toolbar',
        className: 'm-l-none',
        buttons: [
          {
            type: 'button',
            label: 'sm 弹框',
            actionType: 'dialog',
            dialog: {
              size: 'sm',
              title: '提示',
              body: '这是个简单的弹框'
            }
          },
  
          {
            type: 'button',
            label: '标准 弹框',
            actionType: 'dialog',
            dialog: {
              title: '提示',
              body: '这是个简单的弹框'
            }
          },
  
          {
            type: 'button',
            label: 'lg 弹框',
            actionType: 'dialog',
            dialog: {
              size: 'lg',
              title: '提示',
              body: '这是个简单的弹框'
            }
          },
  
          {
            type: 'button',
            label: 'xl 弹框',
            actionType: 'dialog',
            dialog: {
              size: 'xl',
              title: '提示',
              body: '这是个简单的弹框'
            }
          },
  
          {
            type: 'button',
            label: 'full 弹框',
            actionType: 'dialog',
            dialog: {
              size: 'full',
              title: '全屏弹框',
              body: '弹框尽可能占满，内容部分滚动。'
            }
          }
        ]
      }
    ]
  };
  
  export default schema2component(schema);